{% extends 'layout/main.html' %}
{% from 'macros/_macros.html' import render_pagination %}

{% block head %}
{{ super() }}
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
{% endblock head %}

{% block content_header %}
<div class="row page-titles">
    <div class="col-md-5 col-8 align-self-center">
        <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="/">首页</a></li>
            <li class="breadcrumb-item active">回收站</li>
        </ol>
    </div>
</div>
{% endblock %}


{% block content %}
<style>
  .checkbox {
    margin-top: 0px;
    height: 20px;
  }
</style>
<div class="row" id="app">
  <div class="col-sm">
    <div class="card">
        <div class="card-body">

        <table class="table table-hover table-bordered m-t-10">
          <thead>
            <tr>
              <th style="width: 10px">
                <div class="checkbox">
                  <input class="ids" type="checkbox" id="check_box">
                  <label for="check_box"></label>
                </div>
              </th>
              <th width="100">栏目</th>
              <th>标题</th>
              <th width="200">作者</th>
              <th width="190">创建时间</th>
              <th width="190">更新时间</th>
            </tr>
          </thead>
          <tbody>
            {% if model %}
            {% for item in model %}
            <tr>
              <td>
                <div class="checkbox">
                  <input class="ids" type="checkbox" id="checkbox{{item.id}}" value="{{item.id}}" name="ids[]">
                  <label for="checkbox{{item.id}}"></label>
                </div>
              </td>
              <td>{{ item.category.title }}</td>
              <td>{{ item.title }}</td>
              <td>{{ item.user.nickname|default('没有设置') }}</td>
              <td>{{ moment(item.created_at).format('Y-MM-DD hh:mm:ss') }}</td>
              <td>{{ moment(item.updated_at).format('Y-MM-DD hh:mm:ss') }}</td>
            </tr>
            {% endfor %}
            {% endif %}
          </tbody>

        </table>
        <div class="row">
          <div class="col-sm">
            <div class="btn-group m-b-10 m-r-10" role="group">
              <button type="button" @click="choose" class="btn btn-secondary">全选/取消</button>
              <button type="button" @click="submit_delete" class="btn waves-effect waves-light btn-danger">删除回收站</button>
              <button type="button" @click="restore" class="btn btn-secondary">还原</button>
            </div>
          </div>
          <div class="col-sm justify-content-end">
            {{ render_pagination(pagination) }}
          </div>
        </div>
      </div>
    </div>
  </div>
  {% endblock %}

  {% block scripts %}
  {{ super() }}
  <script type="text/javascript">
    var app = new Vue({
      el: '#app',
      delimiters: ['${', '}'],
      data: {
        title: null,
        news_items: []
      },
      created: function () {
      },
      methods: {
        choose: function () {
          let check_box = $('#check_box')
          check_box.prop('checked', !check_box.is(':checked'))
          $("input[name='ids[]']").prop('checked', check_box.is(':checked'))
        },
        submit_delete: function () {
          let chk_value = [];
          $("input[name='ids[]']:checked").each(function () {
            chk_value.push($(this).val())
          })
          if (chk_value.length === 0) {
            swal("你没有选择文章")
            return false
          }
          swal({
            title: "您确定?",
            text: "确认要从回收站删除吗？",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "是的, 我确定!",
            cancelButtonText: "取消操作"
          }, function () {
            $.post({
              url: "{{ url_for('.ajax_delete') }}?physics=1",
              data: {
                'csrf_token': '{{ csrf_token() }}',
                'ids': JSON.stringify(chk_value)
              },
              success: function (result) {
                result.success && window.location.reload()
              }
            })
          })
        },
        restore: function () {
          let chk_value = [];
          $("input[name='ids[]']:checked").each(function () {
            chk_value.push($(this).val())
          })
          if (chk_value.length === 0) {
            swal("你没有选择文章")
            return false
          }
          swal({
            title: "您确定?",
            text: "确认要从回收站还原吗？",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "是的, 我确定!",
            cancelButtonText: "取消操作"
          }, function () {
            $.post({
              url: "{{ url_for('.ajax_restore') }}",
              data: {
                'csrf_token': '{{ csrf_token() }}',
                'ids': JSON.stringify(chk_value)
              },
              success: function (result) {
                result.success && window.location.reload()
              }
            })
          })
        }
      }
    })
    $(function () {
      $('#check_box').click(function () {
        $("input[name='ids[]']").prop('checked', this.checked)
      })
    })
  </script>
  {% endblock scripts %}